export default function DesignBlock({ info = {} }: any) {
  const toDesign = () => {
    window.location.href = '/#/editor';
  };
  return (
    <div className="relative flex h-[700px] bg-[rgba(104,107,115,0.6)] ">
      <div className="relative left-[50%] ml-[-712px] flex h-[700px] w-[1424px]">
        <div className="relative mt-[50px] flex h-[600px] w-full">
          <img className="swiper-item  h-auto w-full" src={info.picPath} alt="img" />
          <div className="absolute bottom-[80px] left-[40px] flex flex-col text-[#ffffff]">
            <div className="mb-[20px] text-[50px] leading-[76px]">风格如此独特</div>
            <div
              onClick={() => toDesign}
              style={{ border: '1px solid #ffffff' }}
              className="h-[70px] w-[180px] cursor-pointer rounded-[8px] text-center text-[28px] leading-[70px] text-[#ffffff]"
            >
              {info.explanation}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
